<template>
  <div class="team">
    <div class="team_tabs">
      <div
        class="button"
        v-for="(item, index) in tabList"
        :key="index"
        @click="changeActive(item.component)"
        :class="activeName == item.component ? 'active' : ''"
      >{{ item.name }}</div>
    </div>
    <div class="team_component">
      <component :is="activeName"></component>
    </div>
  </div>
</template>

<script>
import myteam from "../components/team/myteam.vue";
import setting from "../components/team/setting.vue";
import communicate from "../components/team/communicate.vue";
export default {
  name: "Geometry1Team",
  components: {
    myteam,
    setting,
    communicate
  },
  data() {
    return {
      tabList: [
        {
          name: "我的团队",
          component: "myteam"
        },
        {
          name: "沟通",
          component: "communicate"
        },
        {
          name: "设置",
          component: "setting"
        }
      ],
      activeName: "myteam"
    };
  },

  mounted() {},

  methods: {
    changeActive(name) {
      this.activeName = name;
    }
  }
};
</script>

<style lang="less" scoped>
.team {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 10px;
  // padding: 10px;
  box-sizing: border-box;
  &_tabs {
    width: 100%;
    height: 69px;
    text-align: left;
    background: #f7f7f7;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.15);
    padding-left: 30px;
    box-sizing: border-box;
    .button {
      width: 100px;
      height: 100%;
      line-height: 69px;
      margin-right: 10px;
      display: inline-block;
      text-align: center;
      cursor: pointer;
    }
    .active {
      color: #111111;
      border-bottom: 2px solid #111111;
    }
  }
}
</style>